<template>
  <div>
    <Top></Top>
    <Header></Header>
    <!-- 购物车展示页面 -->
    <el-row>
      <el-col :span="20"
              :offset="2">
        <el-table ref="multipleTable"
                  :data="goodsList"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <!-- 复选框 -->
          <el-table-column type="selection" width="55"></el-table-column>

          <el-table-column label="图片"
                           width="120"
                           align="center">
            <!--slot-scope：作用域插槽 ，
          在<el-table-column>中得到图片必须通过插槽实现。
          scope：封装了goodsList对象，
          里面的row代表当前行的元素（数组中的某个元素）
            -->
            <template slot-scope="scope">
              <img :src="$imgPrefix + scope.row.image"
                   alt=""
                   style="width: 80px; height: 80px;" />
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           label="商品名字"
                           width="360"
                           align="center">
          </el-table-column>
          <el-table-column prop="price"
                           label="单价"
                           align="center">
          </el-table-column>
          <el-table-column label="数量"
                           width="200px"
                           align="center">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.num"
                               :min="1"
                               :max="scope.row.stock"
                               size="mini"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计"
                           align="center">
            <template slot-scope="scope">
              <!-- 并固定为两位小数 -->
              {{(scope.row.price * scope.row.num).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button type="danger"
                         size="mini"
                         @click="del(scope.row.id)">
                删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 layout：布局-->
        <el-row class="justify-content-center">
          <el-col :span="12">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="page"
                           :page-sizes="[5,10]"
                           :page-size="size"
                           layout=" prev, pager, next, jumper,total, sizes"
                           :total=total>
            </el-pagination>
          </el-col>
        </el-row>
        <!-- 总价、去结算 -->
        <el-row>
          <el-col :span="6"
                  :offset="18"
                  style="text-align:right">
            共计：<span class="totalPrice">{{(getTotalPrice()).toFixed(2)}}</span>
            <el-button type="success"
                       size="mini"
                       @click="goPay">去结算</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <Footer></Footer>

  </div>
</template>
<script>
//1. 可以通过import导入组件--相对路径
import Top from './commons/top.vue'
import Header from './commons/header.vue'
import Footer from './commons/foot.vue'
export default {
  data() {
    return {
      goodsList: [],
      //分页数据
      page: 1,
      size: 5,
      total: 0,
      totalPage: 0,
      //表格
      multipleSelection: []
    }
  },
  components: {// 注册
    Top,
    Header,
    Footer
  },
  mounted() {//页面挂载时执行
    this.getData()
  },
  methods: {
    handleSelectionChange(val) {//勾选表格触发的事件
      this.multipleSelection = val
    },
    handleSizeChange(val) {//页面大小改变时触发的事件
      this.size = val
      this.getData()
    },
    handleCurrentChange(val) {//当前页面改变时触发的事件
      this.page = val
      this.getData()
    },
    getData() {//查询该用户的购物车
      console.log(this.page,this.size)
      this.$axios.get('/cart/queryCartByUid/' + this.page + '/' + this.size).then(res => {
          console.log(res.data)
          //res响应结果的解读：
          //res.data.data————resPage； res.data.data.data————List<CartVo>
          //拿到resPage
          let resPage = res.data.data
          //拿到其中的数据
          this.page = resPage.curPage
          this.total = resPage.total
          this.totalPage = resPage.totalPage
          this.goodsList = resPage.data
        })
    },
    del(id) {
      this.$axios.delete('/cart/delById/' + id).then(res => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message.success('删除成功！')
          //刷新页面
          this.getData()
        }
      })
    },
    getTotalPrice() {
      let total = 0
      for (const cart of this.multipleSelection) {
        total = total + cart.num * cart.price
      }
      return total
    },
    goPay() {//结算
      if (this.multipleSelection.length == 0) {
        this.$message.warning('请至少勾选一个商品')
        return
      }
      //如果传的参数是对象、数组，push用路由的名字进行跳转，参数都放在params的对象中。--该传递方法，一旦刷新会报错
        // this.$router.push({
        //   name:"OrderConfirm",
        //   params:{
        //     goodsList:this.multipleSelection
        //   }
        // })
        //第二种方法传递选中的购物车信息,copy数据并放到本地
        sessionStorage.setItem("goodsList",JSON.stringify(this.multipleSelection))
        this.$router.push("/orderConfirm")

      
      
    }
  }
}
</script>
<style scoped>
.justify-content-center {
  display: flex;
  justify-content: center;
}
.totalPrice {
  color: brown;
  font-size: 40px;
}
</style>